<script setup>
import { ref } from 'vue'

const form = ref({
    adminname: '',
    password: ''
})
import { useRouter } from 'vue-router';
const router = useRouter();

import { useUserStore } from '@/stores/login'
const user = useUserStore()

function login() {
    // console.log(form.value.adminname) 
    if (form.value.adminname == 'admin' && form.value.password == 'admin') {
        // alert('登录成功')
        router.push('/');//去首页
        localStorage.setItem('token', '<admin>');
        ElMessage({
            message: '登录成功',
            type: 'success',
            plain: true,
        })

        user.changeUserState({
            token: '<admin>',
            username: form.value.adminname,
            isLogin: true
        })
    } else {
        ElMessage({
            message: '权限不足',
            type: 'success',
            plain: true,
        })
    }
}
</script>

<template>
    <div class="bg">
        <!-- 登录页面 -->
        <div class="form">
            <div class="zhsw">
                <img style="width: 60px;height: 60px;"
                    src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/index/u20.png"
                    alt="">
                <h2>智慧水务</h2>
            </div>
            <div class="form_zhsw">
                <p>智慧水务平台</p>
                <p>
                    Smart Water-related Affairs
                </p>
                <el-form>
                    <el-input style="width: 200px;" v-model="form.adminname" placeholder="请输入用户名称" />
                    <el-input style="width: 200px;" v-model="form.password" type="password" placeholder="请输入登陆密码" />
                    <br>
                    <el-button type="primary" round @click="login">登录</el-button>

                </el-form>
                <p style="font-size: 12px;color: #ccc;"> 部分模块加载较慢，请耐心等待</p>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.bg {
    width: 100%;
    height: 100%;
    background-image: url("@/assets/loginbg.jpg");
    background-size: 100% 100%;
}

.form {
    width: 300px;
    height: 400px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;

    .zhsw {
        display: flex;
        height: 60px;
        align-items: center;
    }

    .form_zhsw {
        margin-top: 30px;

        p {
            text-align: center;
            margin-bottom: 10px;
            color: #007BFE;
        }

        .el-form {
            height: 200px;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .el-input {
                margin: 10px auto;
            }

            .el-button {
                width: 200px;
            }
        }
    }
}
</style>